<template>
<div class="index">
  <div class="header">
    <div class="iconfont back-icon" @click="fanhui">&#xe6b1;</div>
    <div class="header-left">基本资料</div>
  </div>
    <div  v-for="item of user">
    <div class="list">
      <ul class="itemlist" style="margin-top: 80px">
        <li class="item">昵称<span style="margin-left: 152px">{{item.username}}</span></li>
        <li class="item">性别<span style="margin-left: 152px">{{item.sex}}</span></li>
        <li class="item">年龄<span style="margin-left: 152px">{{item.age}}</span></li>
        <li class="item">所在地<span style="margin-left: 130px">{{item.area}}</span></li>
        <li class="item">职业<span style="margin-left: 133px">{{item.job}}</span></li>
        <li class="item">邮箱<span style="position: relative;left: 89px;">{{item.email}}</span></li>
      </ul>
    </div>
  <div class="footer">
    <span style="font-size:20px;margin-left: 11px">个性签名：</span>
    <div class="content">
    <label style="font-size: 20px;font-family:Arial,Helvetica,sans-serif;position: relative;top: 50px;left: 25px;color: gray;"
    >{{item.geyan}}</label>
    </div>
  </div>
    </div>
</div>
</template>

<script>
    import axios from 'axios'
    export default {
        name: "PersonalIndex",
        data () {
          return{
              user:[],
              user_id:'',
              username:'',
              geyan:'',
              sex:'',
              area:'',
              job:'',
              age:0,
              email:'',
              focusnum:0,
              fensi:0
          }
        },
        created () {
            axios.get('/api/personal/index.html')
                .then((res) => {
                    console.log(res);
                    this.user = res.data.data;
                    if(this.user===null){
                        console.log('user为空')
                    }
                })
                .catch((err) => {
                    console.log(err);
                });

            //     axios.get('/api/emplist/depts.html')
            //         .then((res) => {
            //             console.log(res);
            //             this.depts = res.data.data;
            //         })
            //         .catch((err) => {
            //             console.log(err);
            //         });
        },
        methods: {
            fanhui () {
                this.$router.push('/personal')
            },
        }
    }
</script>

<style lang="stylus" scoped>
 .index
   .header
     background-color: lightblue
     line-height 50px
     color lightyellow;
     width 100%
     position absolute
     top 0
     left 0
     .back-icon
       font-size 20px
       margin-top -4px
       margin-left -20px
     .header-left
       font-size 20px
       text-align center
   .list
     margin-top: 1rem;
     width: 100%;
     height: auto;
     background-color: #fff;
     font-size: 1.4rem;
     .item
       padding: 1.2rem 3.5rem;
       border: 1px solid #f8f8f8;
       box-sizing: border-box;
       position: relative;
       margin-top: -15px;
       margin-left: -85px;
       background-repeat: no-repeat;
       background-size: 2rem 2rem;
       background-position: 1rem 1rem;
     .item:last-child
       border-bottom: none;
     .item:after
       content: '';
       display: inline-block;
       height: .8rem;
       width: .8rem;
       border-width: 2px 2px 0 0;
       border-color:#999;
       border-style: solid;
       transform: rotate(45deg);
       position: absolute;
       right: 1rem;
       top: 1.5rem;
</style>
